<template>
  <div>
    <!-- 经纪人基本信息 -->
    <div>
      <p>经纪人基本信息</p>
      <table>
        <tr>
          <td>姓名</td>
          <td>证件类型</td>
          <td>证件号码</td>
          <td>手机号码</td>
          <td>所属公司</td>
        </tr>
        <tr>
          <td>{{info.idCardName}}</td>
          <td>{{info.cardType === 1 ? "身份证" : ""}}</td>
          <td>{{info.idCard}}</td>
          <td>{{info.brokerPhone}}</td>
          <td>{{info.companyName}}</td>
        </tr>
      </table>
    </div>
    <!-- 证件照片     -->
    <div class="demo-image__preview">
      <p>证件照片</p>
      <el-image
        style="width: 100px; height: 100px"
        :src="info.idCardFront"
        :preview-src-list="srcList"
      ></el-image>
      <el-image
        style="width: 100px; height: 100px"
        :src="info.idCardBack"
        :preview-src-list="srcList1"
      ></el-image>
    </div>
    <!-- 奖励结算信息 -->
    <div>
        <p>奖励结算信息</p>
        <table>
            <tr>
                <td>申请奖励金额</td>
                <td>￥7000</td>
                <td>票据方式</td>
                <td>无</td>
            </tr>
            <tr>
                <td>税率</td>
                <td>6%</td>
                <td>计税方式</td>
                <td>一般</td>
            </tr>
            <tr>
                <td>税金</td>
                <td>￥420</td>
                <td>申请人</td>
                <td>yxy</td>
            </tr>
            <tr>
                <td>实际实付金额</td>
                <td>￥6666</td>
                <td>申请时间</td>
                <td>2020-02-26 19:43:12</td>
            </tr>
            <tr>
                <td>付款结算方式</td>
                <td>银行企业</td>
                <td>申请渠道</td>
                <td>经纪人端</td>
            </tr>
            <tr>
                <td>奖励方式</td>
                <td>现金</td>
                <td>——</td>
                <td>——</td>
            </tr>
            <tr>
                <td>付款摘要</td>
                <td>合生霄云路8号</td>
                
            </tr>
        </table>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      id: "",
      info: {},
      srcList: [],
      srcList1: []
    };
  },
  created() {
    this.id = this.$route.query.id;    
    this.$axios
      .get(`/commission/broker/apply/audit/${this.id}`)
      .then(res => {
        console.log(res);
        this.info = res;

        this.srcList.push(this.info.idCardFront);
        this.srcList1.push(this.info.idCardBack);
        console.log(this.srcList);
      })
      .catch(error => {});
    
  }
};
</script>
<style scoped>
p {
  font-size: 16px;
  font-weight: bold;
}
table {
  border-collapse: collapse;
  width: 100%;
  height: 100px;
}
table > tr {
  vertical-align: middle;
  text-align: center;
}
tr {
  display: table-row;
  vertical-align: inherit;
  border-color: inherit;
}
td {
  border: 1px solid #cccccc;
  font-size: 16px;
  padding:10px 0;
}
</style>